<meta name="viewport">
content
設定の内容を書く
contentの中身
width
viewporrtの幅を指定する
具体的なpx値
範囲は1~1000
e.g. 600
viewportの幅を、デバイスの画面幅に設定する
ページがデバイスの画面サイズに合わせてスケーリングされる
height
widthの高さ版
基本使わない
ユーザーがページを縮小できる最小のズームレベルを指定します。GPT-4.icon
例: minimum-scale=0.5 は、ページを50%まで縮小できることを意味します。
ユーザーがページを拡大できる最大のズームレベルを指定します。GPT-4.icon
例: maximum-scale=2.0 は、ページを200%まで拡大できることを意味します。
ユーザーがズームを行えるかどうかを指定します。GPT-4.icon
値としては、yes（ズーム可能）やno（ズーム不可）を指定できます。
noを試してみたけどchromeだと普通に拡大縮小できるmrsekut.icon
2016年あたりでこの指定自体が無効になっているらしい
「ズームできないのは体験悪い」というのは分かるけど、仕様をガッツリ無視した実装になっているのはいかがなものだろうか
長いけどわかりやすい、けど長い
このサイトのレイアウトが異常に読みづらいのでスクボ読書化して読んだ
まだ理解があやふやmrsekut.icon
ひとまずこんな感じの理解をしたmrsekut.icon
これがどれぐらい正確な理解なのかは不明
まず、以下2つの関係性の話をしている
デバイスの幅
viewportの幅
ブラウザは、viewportがデバイスに収まるように表示する
だから、
デバイスの幅 < viewportの幅
である場合、デバイスに収めるために、viewportのscaleを小さくしてから収める
https://gyazo.com/e6a83e0d5d03aff67362ae63f36488ae
そこで、勝手に縮小されるのを避けるために、scaleに関する指定をする属性が用意されている
逆に、デバイスの幅 > viewportの幅
である場合は、同様の理屈で拡大して表示される
よく書くやつ